<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="李彩霞">
    <title>小米官网首页</title>
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styleheader2.css">
    <link rel="stylesheet" href="stylefooter.css">
</head>
<body>
     <header class="headera">
      <div class="headera-left"> 
         <img src="分类/images/icon_back_n.png" alt="">
      </div>
         <span>购物车</span>
      <div class="headera-right"> 
         <img src="搜索/images/search.png" alt="">
      </div>
     </header>
     <div class="more">
         <div class="more-left">登录后更多优惠</div>
         <div class="more-right">去登录<span>></span></div>
     </div>
      <div class="login">
          <div class="login-a">
              <img src="购物车/images/empty.png" alt="">
              <p>购物车还是空的</p>
              <button>去逛逛</button>
          </div>
      </div>
<div class="recommend">
     <span>为您推荐</span>
</div>

<div class="middle">
    <div class="c-middle">
        <div class="c-middle-left">
            <img src="购物车/images/a1.png" alt="">
        </div>
        <div class="c-middle-right">
            <img src="购物车/images/a2.png" alt="">
        </div>
        <div class="clear"></div>
    </div>
    <div class="d-middle">
        <div class="d-middle-left">
            <span class="biaoti">小米移动电源2</span><br>
            <span class="jiage">￥<strong>79</strong></span>
        </div>
        <div class="d-middle-right">
            <span class="biaoti">小米盒子</span><br>
            <span class="jiage">￥<strong>299</strong></span>
        </div>
    </div>


    <div class="c-middle">
        <div class="c-middle-left">
            <img src="购物车/images/a3.png" alt="">
        </div>
        <div class="c-middle-right">
            <img src="购物车/images/a4.png" alt="">
        </div>
        <div class="clear"></div>
    </div>
    <div class="d-middle">
        <div class="d-middle-left">
            <span class="biaoti">小米移动电源2</span><br>
            <span class="jiage">￥<strong>79</strong></span>
        </div>
        <div class="d-middle-right">
            <span class="biaoti">小米盒子</span><br>
            <span class="jiage">￥<strong>299</strong></span>
        </div>
    </div>

    <div class="c-middle">
        <div class="c-middle-left">
            <img src="购物车/images/a5.png" alt="">
        </div>
        <div class="c-middle-right">
            <img src="购物车/images/a6.png" alt="">
        </div>
        <div class="clear"></div>
    </div>
    <div class="d-middle">
        <div class="d-middle-left">
            <span class="biaoti">小米移动电源2</span><br>
            <span class="jiage">￥<strong>79</strong></span>
        </div>
        <div class="d-middle-right">
            <span class="biaoti">小米盒子</span><br>
            <span class="jiage">￥<strong>299</strong></span>
        </div>
    </div>

    <div class="c-middle">
        <div class="c-middle-left">
            <img src="购物车/images/a7.png" alt="">
        </div>
        <div class="c-middle-right">
            <img src="购物车/images/a8.png" alt="">
        </div>
        <div class="clear"></div>
    </div>
    <div class="d-middle">
        <div class="d-middle-left">
            <span class="biaoti">小米移动电源2</span><br>
            <span class="jiage">￥<strong>79</strong></span>
        </div>
        <div class="d-middle-right">
            <span class="biaoti">小米盒子</span><br>
            <span class="jiage">￥<strong>299</strong></span>
        </div>
    </div>
    <div class="c-middle">
        <div class="c-middle-left">
            <img src="购物车/images/a9.png" alt="">
        </div>
        <div class="c-middle-right">
            <img src="购物车/images/a10.png" alt="">
        </div>
        <div class="clear"></div>
    </div>
    <div class="d-middle">
        <div class="d-middle-left">
            <span class="biaoti">小米移动电源2</span><br>
            <span class="jiage">￥<strong>79</strong></span>
        </div>
        <div class="d-middle-right">
            <span class="biaoti">小米盒子</span><br>
            <span class="jiage">￥<strong>299</strong></span>
        </div>
    </div>


    <div class="c-middle">
        <div class="c-middle-left">
            <img src="购物车/images/a11.png" alt="">
        </div>
        <div class="c-middle-right">
            <img src="购物车/images/a12.png" alt="">
        </div>
        <div class="clear"></div>
    </div>
    <div class="d-middle">
        <div class="d-middle-left">
            <span class="biaoti">小米移动电源2</span><br>
            <span class="jiage">￥<strong>79</strong></span>
        </div>
        <div class="d-middle-right">
            <span class="biaoti">小米盒子</span><br>
            <span class="jiage">￥<strong>299</strong></span>
        </div>
    </div>

    <div class="c-middle">
        <div class="c-middle-left">
            <img src="购物车/images/a13.png" alt="">
        </div>
        <div class="c-middle-right">
            <img src="购物车/images/a14.png" alt="">
        </div>
        <div class="clear"></div>
    </div>
    <div class="d-middle">
        <div class="d-middle-left">
            <span class="biaoti">小米移动电源2</span><br>
            <span class="jiage">￥<strong>79</strong></span>
        </div>
        <div class="d-middle-right">
            <span class="biaoti">小米盒子</span><br>
            <span class="jiage">￥<strong>299</strong></span>
        </div>
    </div>

    <div class="c-middle">
        <div class="c-middle-left">
            <img src="购物车/images/a15.png" alt="">
        </div>
        <div class="c-middle-right">
            <img src="购物车/images/a16.png" alt="">
        </div>
        <div class="clear"></div>
    </div>
    <div class="d-middle">
        <div class="d-middle-left">
            <span class="biaoti">小米移动电源2</span><br>
            <span class="jiage">￥<strong>79</strong></span>
        </div>
        <div class="d-middle-right">
            <span class="biaoti">小米盒子</span><br>
            <span class="jiage">￥<strong>299</strong></span>
        </div>
    </div>
    <div class="c-middle">
        <div class="c-middle-left">
            <img src="购物车/images/a17.png" alt="">
        </div>
        <div class="c-middle-right">
            <img src="购物车/images/a18.png" alt="">
        </div>
        <div class="clear"></div>
    </div>
    <div class="d-middle">
        <div class="d-middle-left">
            <span class="biaoti">小米移动电源2</span><br>
            <span class="jiage">￥<strong>79</strong></span>
        </div>
        <div class="d-middle-right">
            <span class="biaoti">小米盒子</span><br>
            <span class="jiage">￥<strong>299</strong></span>
        </div>
    </div>


    <div class="c-middle">
        <div class="c-middle-left">
            <img src="购物车/images/a19.png" alt="">
        </div>
        <div class="c-middle-right">
            <img src="购物车/images/a20.png" alt="">
        </div>
        <div class="clear"></div>
    </div>
    <div class="d-middle">
        <div class="d-middle-left">
            <span class="biaoti">小米移动电源2</span><br>
            <span class="jiage">￥<strong>79</strong></span>
        </div>
        <div class="d-middle-right">
            <span class="biaoti">小米盒子</span><br>
            <span class="jiage">￥<strong>299</strong></span>
        </div>
    </div>

<div class="clear"></div>
</div>

<div class="footer-black"></div>

   <footer>
   <footer>
    <ul>
        <li><div><img src="购物车/images/home1.png" alt=""></div><a href="index.html">首页</a></li>
        <li><div><img src="购物车/images/classify1.png" alt=""></div><a href="index1.html">分类</a></li>
        <li><div><img src="购物车/images/buy1.png" alt=""></div><a href="index2.html">购物车</a></li>
        <li><div><img src="购物车/images/person1.png" alt=""></div><a href="index3.html">我的</a></li>
    </ul>
</footer>
</footer>
    <script src="Bootstrap/js/jquery-3.1.1.min.js"></script>
    <script src="Bootstrap/js/bootstrap.min.js"></script>
</body> 
